<template>
  <div class="package">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
      <el-form-item prop="status">
        <el-select
            v-model="queryParams.status"
            placeholder="房间状态"
            clearable
            style="width: 120px"
        >
            <el-option
              v-for="dict in sys_room_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
        </el-select>
        <el-popover
          placement="bottom"
          :width="200"
          trigger="click"
        >
          <template #reference>
            <el-icon class="ml10" style="color: var(--el-text-color-placeholder);"><QuestionFilled /></el-icon>
          </template>
          <div>
            <div>空房：无入住人的房间</div>
            <div>账单欠费：有账单到期未支付或剩余水电欠费</div>
            <div>逾期：有逾期未退房的房间</div>
            <div>维修：有报修的房间</div>
            <div>即将到期：即将到期的房间</div>
            <div>水电欠费：入住中水电欠费</div>
          </div>
        </el-popover>
      </el-form-item>
      <el-form-item label="时间筛选" style="width: 308px" v-if="queryParams.status === '1'">
        <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="searchStr">
        <el-input
          v-model="queryParams.searchStr"
          placeholder="请输入入住人或房源地址"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        >
          <template #append>
            <el-button :icon="Search" @click="handleQuery" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <div>数量：<span style="font-size: 20px;font-style: italic;">{{ roomCount }}</span> 间</div>
      </el-form-item>
    </el-form>
    <el-radio-group v-model="apartment" @change="radio">
      <el-radio-button label="" >全部</el-radio-button>
      <el-radio-button label="1">劲叶</el-radio-button>
    </el-radio-group>
    <div class="mt20">
      <RoomFloor />
      <RoomFloor />
    </div>
  </div>
</template>
<script setup name="Package">
import { QuestionFilled, Search, MoreFilled } from '@element-plus/icons-vue'
import RoomFloor from './component/roomFloor.vue'

const { proxy } = getCurrentInstance();
// 系统字典的获取方式
const { sys_room_status } = proxy.useDict("sys_room_status");


const dateRange = ref([]);
const showSearch = ref(true)
const roomCount = ref(0)
const apartment = ref('')
function radio(value) {
  console.log('radio>>>', value);
}
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: undefined,
    searchStr: undefined
  },
})
const { queryParams } = toRefs(data);

function getList() {
  console.log('queryParams>>>', proxy.addDateRange(queryParams.value, dateRange.value));
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};
</script>